<script setup lang="ts">

</script>

<template>
  <div class="news">
    <div class="news-title">新闻资讯</div>
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="i in 4" :key="i">
          <div class="img-wrap">
            <img src="../../../assets/images/home/1.png" alt="" />
          </div>
          <div class="text">
            <p class="title">江苏市场启动发布会</p>
            <p class="content">技术专利简介技术专利简介技术专利简介技术专利简介技术专利简介技术专利简介技术专利简介技术专利</p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="news-content">
      <div class="news-item">
        <div class="news-item-img">
          <img src="../../../assets/images/home/1.png" alt="" />
        </div>
        <div class="news-item-content">技术专利简介技术专利简介技术专利..........</div>
      </div>
      <div class="news-item">
        <div class="news-item-img">
          <img src="../../../assets/images/home/1.png" alt="" />
        </div>
        <div class="news-item-content">技术专利简介技术专利简介技术专利..........</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.banner{
  background: #eee;
  position: relative;
  .img-wrap{
    width: 100%;
    height: 247px;
    overflow: hidden;
    border-radius: 14px;
    img{
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      display: block;
    }
  }
  .text{
    position: absolute;
    left: 21px;
    bottom: 57px;
    color: #fff;
    .title{
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .content{
      font-size: 16px;
      line-height: 24px;
      display: block;
      width: 383px;
    }
  }
}
.news{
  padding: 0 40px;
  .news-title{
    font-size: 34px;
    font-weight: bold;
    color: #126EF8;
    text-align: center;
    padding: 50px 0px;
  }
  .news-content{
    display: flex;
    justify-content: space-between;
    margin-top: 63px;
    .news-item{
      width: 329px;
      border-radius: 14px;
      overflow: hidden;
      background: #eee;
      padding-bottom: 20px;
      .news-item-img{
        img{
          display: block;
          width: 100%;
          border-radius: 14px;
          overflow: hidden;
        }
        margin-bottom: 12px;
      }
      .news-item-content{
        padding: 0px 20px;
        font-size: 16px;
        color: #2D2D2D;
      }
    }
  }
}
</style>
